<template>
  <div class="account-login">
    <div class="login-title">登录</div>
    <div class="form">
      <div>
        <van-field :value="phone" placeholder="请输入手机号" @input="phoneInput"/>
      </div>
      <div class="mar-t-20">
        <van-field class="mar-t-20" type="password" :value="password" placeholder="密码" @input="passwordInput"/>
      </div>
      <div class="login-btn" @click="login">登录</div>
    </div>
  </div>
</template>
<script>
import { getAuth, loginByPhone } from '@/api/login'
import { setCustomerId, setPhone, setToken, setCommunityGroup, setShowBuyCard } from '@/utils/auth'
export default {
  data() {
    return {
      phone: '',
      password: '',
      timer: null
    }
  },
  onShow() {
    this.$pt.hideHomeButton()
    this.getAuth()
  },
  unLoad() {
    clearTimeout(this.timer)
  },
  methods: {
    getAuth() {
      this.$pt.login({
        success: res => {
          if (res.code) {
            getAuth(res.code).then((response) => {
              setShowBuyCard(response.data.showBuyCard)
            }).catch(() => {
            })
          }
        }
      })
    },
    phoneInput(e) {
      this.phone = e.mp.detail
    },
    passwordInput(e) {
      this.password = e.mp.detail
    },
    login() {
      loginByPhone({
        phone: this.phone,
        pwd: this.password
      }).then(response => {
        if (response.isError) return
        // 设置登录类型 1： 社群/团长身份登录 2：门店身份登录
        this.$pt.setStorageSync('loginType', 2)
        // response.data.isCommunityGroupExtraction = 1
        // response.data.storeState = 1
        // 判断门店到家增值功能 0关闭 1开启
        if (response.data.storeHomeAuthority === 0) {
          this.$utils.showToast({
            title: '系统已到期',
            duration: 3000
          })
        } else if (response.data.storeState === 0) {
          // 门店是否为启用状态
          this.$utils.showToast({
            title: '该门店已被禁用',
            duration: 3000
          })
        } else {
          // 社区团购业务是否开启 0：否 1：开启
          if (response.data.isCommunityGroupExtraction === 1) {
            setCommunityGroup('1')
          } else {
            setCommunityGroup('0')
          }
          setCustomerId(response.data.memberId)
          setPhone(this.phone)
          response.data.token && setToken(response.data.token)
          this.$utils.showToast({
            title: '登录成功',
            duration: 3000
          })
          this.timer = setTimeout(() => {
            this.$pt.switchTab({ url: '/pages/home/main' })
          }, 3000)
        }
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.account-login{
  padding: 0 12px;
  position: relative;
  &::before{
    content: '';
    position: absolute;
    left: -30%;
    top: 0;
    width: 160%;
    height: 197px;
    border-radius: 0 0 50% 50%;
    background: linear-gradient(to bottom, #FF243D, #FF3C52);
    z-index: -1;
  }
  .login-title{
    font-size: 27px;
    color: #FFF;
    font-weight: bold;
    padding-top: 20px;
  }
  .form{
    padding: 23px 20px 30px;
    // height: 278px;
    border-radius: 10px;
    background-color: #FFF;
    margin-top: 20px;
    overflow: hidden;
    .login-btn{
      width: 290px;
      height: 45px;
      line-height: 45px;
      text-align: center;
      color: #FFF;
      background-color: #FF1717;
      font-size: 16px;
      font-weight: bold;
      border-radius: 22px;
      margin: 68px auto 0;
    }
  }
}
</style>
